<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>画布</title>
	<style>
		body{
			margin: 0;
		}
		canvas{
			display: block;
			/* width: 1200px;
			height: 600px; */
			border: 10px solid #000;
			margin: 20px auto;
		}
	</style>
</head>
<body>
	<canvas width="1200" height="600">该浏览器不支持该属性</canvas>
	<script src="jquery.js"></script>
	<script>
		var canvas=$("canvas");
		// var canvas1=document.getElementsByTagName("canvas")[0];

		//画笔
		var ctx=canvas[0].getContext("2d");

		//随机生成圆心
		function random(x,y){
			return Math.floor(Math.random()*(y-x+1))+x;
		}
		var str="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
		var arr=str.split("");
		//获取画布的尺寸
		var w=canvas.width();
		var h=canvas.height();
		//生成圆形函数并设置属性
		function Ball(){
			this.right=random(0,10)>5?true:false;
			this.bottom=random(0,10)>5?true:false;
			this.x=random(30,w-30);//生成x轴的运动范围
			this.y=random(30,h-30);//y轴范围
			this.stepx=random(1,10);//x轴随机你速度
			this.stepy=random(1,10);//y轴速度
			this.color="rgb("+random(0,255)+","+random(0,255)+","+random(0,255)+")";
		}
		//设置其方法
		Ball.prototype.move=function(){
			//判断是否到右边界
			if(this.right){
				this.x += this.stepx;
				if(this.x >= w-30){
					this.right=false;
				}
			}else{
				this.x-=this.stepx;
				if(this.x<=0){
					this.right=true;
				}
			}
			//判断是否到下边界
			if(this.bottom){
				this.y+=this.stepy;
				if(this.y>=h){
					this.bottom=false;
				}
			}else{
				this.y-=this.stepy;
				if(this.y<=50){
					this.bottom=true;
				}
			}
			ctx.beginPath();
			ctx.fillStyle=this.color;//颜色
			var text=arr[random(0,25)];
			ctx.font = "60px impact";//文字大小
			ctx.fillText(text, this.x, this.y, 1200);//文字
			ctx.closePath();
		}
		//生成多个圆
		var balls=[];
		for(var i=0;i<50;i++){
			balls.push(new Ball());
		}

		//设置定时器
		setInterval(function(){
			canvas.css({
				borderColor:"rgb("+random(0,255)+","+random(0,255)+","+random(0,255)+")"
			})
			ctx.clearRect(0,0,w,h);//清除画布00开始清理的坐标wh结束的坐标
			for(var i=0;i<balls.length;i++){
				balls[i].move()
			}
		},200)





	</script>
</body>
</html>